<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--全诚字符图标-->
<link href="${ctx }/style/font.css" rel="stylesheet" type="text/css">
<link href="${ctx }/style/css.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="${ctx}/style/sweetalert.css">
<link href="${ctx}/style/upload.css" rel="stylesheet" />
<script src="${ctx }/js/jquery1-11-11.min.js"></script>
<script src="${ctx }/js/sweetalert.min.js"></script>
<style type="text/css">
.bind_id {
	
}

.bind_seatNo {
	
}
.paging{clear:both;text-align:center;}
.paging li{display:inline-block;margin:10px 4px;list-style:none;margin-right:10px;padding:5px;background:#0ea4fb;color:#fff;cursor:pointer;}
.paging li.active{background:red;}
.daoru{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;margin:15px auto;color:#fff;background:#0ea4fb;}
</style>

<style>
.daoru{float:left;}
.qd_ul li div{width:16.66%;overflow:hidden;min-height:30px;height:30px;}
.page_div{margin-left:10px;cursor:pointer;display:inline-block;padding:5px;background:#0ea4fb;color:#fff;line-height: 20px;margin-top: 10px;}
</style>
<script type="text/javascript">
var page_size='${totalPages }';
$(function(){
	page();
});
function page(){
	if(page_size==1){
		$(".next").attr("onclick","");
		$(".prev").attr("onclick","");
	}
}
function loading(pages){
	  $.ajax({
		  "url" : "${ctx}/seat/list", //路径
		   "cache" : false, //不缓存
		   "async" : true, //异步
		   "type" : "POST", //POST方式提交
		   "dataType" : "json", //json格式，重要
		   // "contentType": "application/json",	  //json格式
		   "data" : {
			  'page' : pages
		   }, //要提交的数据对象
		   success : function(json) { //成功处理
			   console.log('对象');
			   console.log(json); 
			   console.log("=================================");
			   var mun = json.seatInfoVos;
		   		$(".seat ul").text("");
				for(var i=0;i<mun.length;i++){
					var activiter = mun[i];
					var text_mun = "<li id='seat"+i+"'>";
					text_mun += "<div class='seat_no'>"+activiter.seatNo+"</div>";
					text_mun += "<div class='user'>";
					text_mun += activiter.name+"<br/><span>"+activiter.mobile+"</span></div>";
					text_mun += "<div class='seat_set'>";
					text_mun += "<div class='add' onClick='addseat(\""+activiter.seatNo+"\",\""+activiter.seatId+"\",\""+activiter.seatNo+"\");'>绑定</div>";
					text_mun += "<div class='clear' onClick='clearseat(\""+i+"\",\""+activiter.seatId+"\");'>清空</div></div></li>";
					$(".seat ul").append(text_mun);
				}
				var next_page = pages+1;
				if(next_page > page_size){
					next_page=1;
				}
				var prev_page = pages-1;
				if(prev_page<1){
					prev_page = page_size;
				}
				$(".prev").attr("onclick","loading("+prev_page+")");
				$(".next").attr("onclick","loading("+next_page+")");
		   },
		   error : function(x, e) { //异常处理
			   
		   }
	});
  }
  
$(function(){
	$('#search').click(function(){
		var keyCode =  $('#keyCode').val();
		console.log("keyCode:{ "+keyCode+" }");
		window.location = "${ctx}/seat/show/1-"+keyCode;
	});
	$('#keyCode').keydown(function(event){
		if(event.which == 13){
	    	var keyCode =  $('#keyCode').val();
    		console.log("keyCode:{ "+keyCode+" }");
			window.location = "${ctx}/seat/show/1-"+keyCode;
		}      
	});
	
});
  
</script>
</head>

<body>
	<!--左边代码-->
	<div class="left_con">
		<div class="hd_bt" style="border-bottom: 1px solid #CCC">
			<strong style="font-size: 26px">${activtites.activites_name }的座位列表</strong>
		</div>
	</div>
		<div class="relative" style="text-align:center;width:540px;height:60px;margin:0 auto;">
			<a href="${ctx}/seat/uploadbyhand" class="daoru" style="margin-right:20px;">手动绑定座位</a>
			<a href="${ctx}/seat/uploadexcel" class="daoru">自动绑定座位</a>
			<div class="relative Seat_seek wid_35 flo_r mar_20">
					<input class="wid_100 absolute top_0 font_14 left_0 lin_hd_40 bor_radius_20 pad_l_10" type="text" placeholder="请搜索座位号" id="keyCode">
					<i class="icon-quancheng495 absolute top_0 right_0 font_26" style="line-height:40px;" id="search"></i>
			</div>
		</div>
		<!--座位列表开始-->
		<div class="seat">
		<ul  style="display:block;">

			<c:forEach var="s" items="${seatInfoVos}" varStatus="list">
				<li id="seat${list.index+1}">
					<div class="seat_no">${s.seatNo}</div>
					<div class="user">
						${s.name}<br/><span>${s.mobile }</span>
					</div>
					<div class="seat_set">
						<div class="add"
							onClick="addseat('${s.seatNo}','${s.seatId}','${s.seatNo}');">绑定</div>
						<div class="clear" onClick="clearseat('${list.index+1}','${s.seatId}');">清空</div>
					</div>
				</li>
			</c:forEach>
		</ul>
		<!--座位列表结束-->
		<!--清除浮动-->
		<div class="c"></div>
		
	      <!--左按钮-->
	      <div class="prev"  onclick="loading(${totalPages })"><img src="${ctx }/images/prev.png" width="50"></div>
	      
	      <!--右按钮-->
	      <div class="next" onclick="loading(2)"><img src="${ctx }/images/next.png" width="50"></div>
	</div>
				
		<!--绑定用户开始-->
		<div class="add_seat" style="display: none;">

			<div class="hd_con">

				<div class="set_no">
					<span></span>号座绑定设置 <input type="hidden" value="" class="bind_id">
					<input type="hidden" value="" class="bind_seatNo">
				</div>

				<div class="hd_qd">
					<input name="" id = "nameOrMobile" type="text"
						style="font-size: 22px; font-family: '微软雅黑'; padding-left: 10px;"
						placeholder="请输入来宾名称或手机号">
					<div class="tijiao">
						<i class="icon-quancheng134"
							onClick="searchqd(1)"></i>
					<!-- 	<i class="icon-quancheng134"
							onClick="alertsimple('点击这个按钮执行异步搜索数据库',5000); searchqd()"></i> -->
					</div>
				</div>
			</div>



			<div class="hd_con1" id="search_list" style="display: none;">
					<ul class="qd_ul">
						<li>
							<div>姓名</div>
							<div>电话</div>
							<div>性别</div>
							<div>企业</div>
							<div>签到码</div>
							<div>操作</div>
						</li>
					</ul>
					<ul class="qd_ul" id="phone_list">
					</ul>
				</ul>
			</div>
		</div>
		<!--绑定用户结束-->

	<!--js弹出框功能-->
	<div id="insert" style="position: fixed; z-index: 2000;"></div>
	<script src="${ctx }/js/common.js"></script>
	<!--jq代码-->
	<script type="text/javascript">
function bind(mobile,signCode){
		

		var seatID = $(".bind_id").val();
		var seatNo = $(".bind_seatNo").val();
	    $.ajax({
		"url" : '${ctx}'+"/seat/bind", //路径
		"cache" : false, //不缓存
		"async" : true, //异步
		"type" : "POST", //POST方式提交
		"dataType" : "json", //json格式，重要
		// "contentType": "application/json",	  //json格式
		"data" : {
			'seatID' : seatID,
			'seatNo' : seatNo,
			'mobile':mobile,
			'signCode':signCode
		}, //要提交的数据对象
		success : function(json) { //成功处理
			//swal("绑定成功!", "", "success");
			alert("绑定成功");	 
			location.reload(true); 
		},
		error : function(x, e) { //异常处理
			console.log(x);
			console.log(e);
			console.log('处理失败');
		}
	});
}

//清空座位绑定资料，这里添加异步数据插入代码
function clearseat(i,id){
	$("#seat"+i).find(".user").html("<b></b>");
	//alertsimple(i+"号座已被成功清空",5000);
	$.ajax({
		url : '${ctx}'+"/seat/clearseat",
		type : 'POST',
		dataType : 'JSON',
		data : {
			'seatID' : id
		},
		async : false,
		error : function() {
		
		},
		success : function(json) {
			alert(json.msg);
			console.log('处理成功!');
		}
	});
}

//进入绑定界面，并指定某个座位
function addseat(i,id,seatNo){
	
	$(".bind_id").val('');
	$(".bind_seatNo").val('');
	$(".add_seat").show();
	$(".seat").hide();
	$(".paging").hide();
	$(".Seat_seek").hide();
	$(".add_seat .hd_con .set_no span").html(i);
	$(".bind_id").val(id);
	$(".bind_seatNo").val(seatNo);
	}

//绑定座位资料，这里添加异步数据插入代码
function setseat(i){
	$("#search_list").hide();
	$(".add_seat").hide();
	$(".seat").show();
	alertsimple(i+"号座已成功绑定用户",5000);
	$("#seat"+i).find(".user").html("张学友<br><span>13413413414</span>");
	}
//显示异步搜索的数据内容
function searchqd(page)
{
	$("#search_list").fadeIn(300);
		var nameOrMobile = $("#nameOrMobile").val();
		//alert(nameOrMobile);
	    $.ajax({
		"url" : '${ctx}'+"/seat/search", //路径
		"cache" : false, //不缓存
		"async" : true, //异步
		"type" : "POST", //POST方式提交
		"dataType" : "json", //json格式，重要
		// "contentType": "application/json",	  //json格式
		"data" : {
			'nameOrMobile' : nameOrMobile,
			'pageNumber' : page
			
		}, //要提交的数据对象
		success : function(json) {
		    var acts_mun = json.list;
			var text_mun ="";
			var currentpage = json.currentpage;
			var totalpage = json.totalpage;
			var kaipage;
			var jiepage;
			for(var i=0;i<acts_mun.length;i++){
				var act = acts_mun[i];
				var enterprise = act.enterprise;
				if(enterprise == null){
					enterprise="";
				}
				var sex = act.sex;
				if(sex == 0){
					sex="女";
				}else if(sex == 1){
					sex="男";
				}else{
					sex="保密";
				}
				text_mun += "<li><div>"+act.activiter_name+"</div>";
				text_mun += "<div>"+act.activiter_mobile+"</div>";
				text_mun += "<div>"+sex+"</div>";
				text_mun += "<div>"+enterprise+"</div>";
				text_mun += "<div>"+act.sign_code+"</div>";
				var mobile = act.activiter_mobile;
				var sign_code = act.sign_code;
				text_mun += "<div><a href='#' onclick='bind("+mobile+","+sign_code+")'>绑定</a></div></li>";
			}
			if(currentpage == 1){
				kaipage = "onclick=''";
			}else{
				kaipage = "onclick='searchqd("+(currentpage-1)+")'";
			}
			if(currentpage == totalpage){
				jiepage = "onclick=''";
			}else{
				jiepage = "onclick='searchqd("+(currentpage+1)+")'";
			}
			text_mun += "<div id='page' style='text-align:center;'><span class='page_div' "+kaipage+">上一页 </span> "+currentpage+"/"+totalpage+" <span class='page_div' "+jiepage+">下一页</span></div>"
			$("#phone_list").html(text_mun);
		},
		error : function(x, e) { //异常处理
			console.log(x);
			console.log(e);
			console.log('处理失败');
		}
	});
}

</script>
</body>
</html>